import DatePicker from "components/antd-compatible/date-picker";
import React, { Component, PropTypes } from 'react'
import { messages } from "share/common";
import { Alert, Badge,  Form, message, Modal } from "antd";
import paymentService from "../pay-workbench.service";
import moment from "moment";

class PayingModal extends Component {

  state = {
    loading: false,
    key: ''
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible === this.props.visible) {
      return -1;
    }
    if (!nextProps.visible) {
      this.props.form.resetFields();
      return -1
    } else {
      this.setState({ key: nextProps.operateKey });
    }
  }

  handleOk = () => {
    const { record, onCancel } = this.props, { key } = this.state;
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err){
        let params = {
          detailIds: record.map(item => item.id),
          versionNumbers: record.map(item => item.versionNumber)
        };
        let date = null;
        if (values.date) {
          date = moment(values.date).format('YYYY-MM-DD');
          date = new Date(date).format('yyyy-MM-dd') === new Date().format('yyyy-MM-dd') ? new Date().format('yyyy-MM-dd hh:mm:ss') : new Date(date).format('yyyy-MM-dd 23:59:59')
        }
        let url = key === 'success' ? 'confirmSuccess' : 'confirmFail';
        this.setState({ loading: true });
        paymentService[url](params, date).then(res => {
          const { failNum, successNum } = res.data;
          message.success(messages('finance-4.key140',{arg1: successNum,arg2: failNum})/*成功{arg1}条，失败{arg2}条*/);
          this.setState({ loading: false }, onCancel(true));
        }).catch(e => {
          this.setState({ loading: false });
          message.error(e.response.data.message)
        })
      }
    });
  };

  render() {
    const { visible, onCancel } = this.props;
    const { loading, key } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        visible={visible}
        confirmLoading={loading}
        onOk={this.handleOk}
        onCancel={() => onCancel(false)}
        okText={key === 'success' ? messages('finance-4.key120')/*确认成功*/ : messages('finance-4.key121')/*确认失败*/}
        width={500}
      >
        <div style={{marginTop:'20px'}}>
          <Alert
            message={<div>
              <span style={{marginRight:10,fontSize:14}}>{messages('finance-4.key129')/*将付款状态更改为*/}</span>
              <Badge status={key} text={key === 'success' ? messages('finance-4.key96')/*支付成功*/ : messages('finance-4.key130')/*支付失败*/}/>
            </div>}
            description={<div style={{fontSize:12,color:'red'}}>
              { key === 'success' ? messages('finance-4.key131')/*请通过网银或询问银行的方式确认该笔付款已成功转账*/ :
                messages('finance-4.key132')/*请务必向银行确认该付款支付失败，以免产生重复支付*/}
            </div>}
            type="warning"
            showIcon
          />
          {
            key === 'success' && (
              <Form style={{marginLeft:29}}>
                <Form.Item
                  wrapperCol={{ span: 15, offset: 1 }}
                  labelCol={{ span: 6 }}
                  label={messages('finance-4.key141')/*实际付款日期*/}
                  style={{ margin: '20px 0 10px' }}
                >
                  {getFieldDecorator('date', {
                    rules: [{ required: true, message: messages('finance-4.key136')/*请选择temp*/ }],
                    initialValue: moment(new Date())
                  })(
                    <DatePicker
                      format="YYYY-MM-DD"
                      placeholder={messages('finance-4.key136')/*请选择temp*/}
                      disabledDate={current => current && current.valueOf() > Date.now()}
                      allowClear={false}
                    />
                  )}
                </Form.Item>
              </Form>
            )
          }
        </div>
      </Modal>
    )
  }

  static propTypes = {
    onCancel: PropTypes.func,
    operateKey: PropTypes.string,
    visible: PropTypes.bool,
    record: PropTypes.object
  }

}

const wrappedPayingModal = Form.create()(PayingModal);
export default wrappedPayingModal;
